<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">文章管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>文章列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" style="margin-top: 15px;">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="add">添加</el-button>
      <el-input
          placeholder="请输入内容"
          v-model="param.key" style="width: 220px;margin-left: 20px;" size="mini" clearable>

      </el-input>
      <el-button type="primary" icon="el-icon-search" size="mini" style="margin-left: 10px;" @click="search()">搜索</el-button>
      <el-table
          :data="tableData"
          style="width: 100%;margin-top: 10px;" size="mini">
        <el-table-column
            prop="id"
            label="ID值"
            width="180">
        </el-table-column>
        <el-table-column
            prop="title"
            label="标题"
            width="180">
        </el-table-column>
        <el-table-column
            prop="content"
            label="内容">
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态">
        </el-table-column>
        <el-table-column
            prop="sort"
            label="排序">
        </el-table-column>
        <el-table-column
            prop="create_time"
            label="创建时间">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
<!--            {{scope.row}}-->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edit(scope.row)">编辑</el-button>
            <el-button type="primary" icon="el-icon-delete" size="mini" @click="del(scope.row.id)">删除</el-button>

          </template>
        </el-table-column>

      </el-table>
<!--      分页-->
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[1, 2, 5, 10]"
          :page-size="param.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>

<!--      添加表单-->
      <el-dialog title="添加文章" :visible.sync="addDialogVisible" width="30%">
        <el-form :model="addform" label-width="80px">
          <el-form-item label="文章标题">
            <el-input v-model="addform.title"></el-input>
          </el-form-item>
          <el-form-item label="文章排序">
            <el-input v-model="addform.sort"></el-input>
          </el-form-item>
          <el-form-item label="文章内容">
            <el-input type="textarea" v-model="addform.content"></el-input>
          </el-form-item>
          <el-form-item label="文章状态">
            <el-radio v-model="addform.status" :label="1">启用</el-radio>
            <el-radio v-model="addform.status" :label="2">禁用</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addSave">确 定</el-button>
        </span>
      </el-dialog>
<!--      修改表单-->
      <el-dialog title="编辑文章" :visible.sync="editDialogVisible" width="30%">
        <el-form :model="editform" label-width="80px">
          <el-form-item label="文章标题">
            <el-input v-model="editform.title"></el-input>
          </el-form-item>
          <el-form-item label="文章排序">
            <el-input v-model="editform.sort"></el-input>
          </el-form-item>
          <el-form-item label="文章内容">
            <el-input type="textarea" v-model="editform.content"></el-input>
          </el-form-item>
          <el-form-item label="文章状态">
            <el-radio v-model="editform.status" :label="1">启用</el-radio>
            <el-radio v-model="editform.status" :label="2">禁用</el-radio>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editSave">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>

  </div>
</template>

<script>

export default {
  data(){
    return {
      param:{
        key:'',
        page:1,
        limit:10
      },
      tableData: [],
      currentPage:1,
      total:0,
      addDialogVisible:false,
      editDialogVisible:false,
      addform:{
        title:'',
        content:'',
        sort:10,
        status:1
      },
      editform:{
        id:'',
        title:'',
        content:'',
        sort:'',
        status:''
      }


    }
  },
  created() {

    this.getList()
  },
  methods:{
    add(){
      //开启弹框
      this.addDialogVisible = true;
    },
    async addSave(){
      //发送数据
      const {data:res} = await this.$ajax.post("http://49.234.154.118/api/Article/save",this.addform);
      if (res.code == 1){
        this.$msg.success(res.msg);
        //刷新表格数据
        this.getList();
        //关掉弹框
        this.addDialogVisible = false;
        this.addform.title = '';
        this.addform.content = '';
      }else{
        this.$msg.error(res.msg);
      }
      // console.log(res);
      // this.getList()
    },
    edit(info){
      //开启弹框
      this.editDialogVisible = true;
      this.editform.id = info.id;
      this.editform.title = info.title;
      this.editform.sort = info.sort;
      this.editform.content = info.content;
      this.editform.status = info.status;
      // console.log(info.id);
    },
    async editSave(){
      const {data:res} = await this.$ajax.post("http://49.234.154.118/api/Article/save",this.editform);
      if (res.code == 1){
        this.$msg.success(res.msg);
        //刷新表格数据
        this.getList();
        //关掉弹框
        this.editDialogVisible = false;
        this.editform.title = '';
        this.editform.content = '';
        this.editform.status = '';
        this.editform.id = '';
      }else{
        this.$msg.error(res.msg);
      }
    },
    handleSizeChange(val){
      this.param.limit = val;
      this.getList()
    },
    handleCurrentChange(val){
      this.param.page = val;
      this.getList()
    },
    search(val){
      console.log(val);
      this.getList()
    },
    async getList(){
      const {data:res} = await this.$ajax.get("http://49.234.154.118/api/Article/index",{params:this.param});
      this.tableData = res.data;
      this.total = res.total;
      console.log(res);
    },
    async del(id){
      const {data:res} = await this.$ajax.get("http://49.234.154.118/api/Article/delete",{params:{id:id}});
      if (res.code == 1){
        this.$msg.success(res.msg);

        this.getList();
      }else{
        this.$msg.error(res.msg)
      }

    }

  }


}
</script>

<style scoped>
.el-pagination{
  margin-top: 10px;
}
</style>